<script lang="ts" setup>
  import { reactive, ref, } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { getUserLogListReq, } from '/@/api/log';

  const { createMessage } = useMessage();
  const loading = ref(false)
  
  const searchFormRef = ref();
  const searchForm = reactive({
    dataRange: [],
    operator: '',
  });
  const searchFormActions = {
    reset() {
      searchFormRef.value.resetFields();
      searchFormActions.ok();
    },
    ok() {
      pgActions.reset();
      tableActions.getList();
    },
  }

  
  const pg = reactive({
    current: 1,
    size: 10,
    total: 0,
  });
  const pgActions = {
    reset() {
      pg.current = 1;
      pg.size = 10;
      pg.total = 0;
    },
    currentChange(c) {
      pg.current = c;
      tableActions.getList();
    },
  }

  const table = reactive({
    data: []
  })
  const tableActions = {
    async getList() {
      let params = {
        username: searchForm.operator,
        startIndex: pg.current,
        pageSize: pg.size,
        startTime: searchForm.dataRange ? searchForm.dataRange[0] : '',
        endTime: searchForm.dataRange ? searchForm.dataRange[1] : '',
      };
      loading.value = true;
      let { data, respCode, respMsg } = await getUserLogListReq(params);
      loading.value = false;
      data.data = [];
      if (respCode === 200) {
        table.data = data.list;
        pg.total = data.total;
      } else {
        createMessage({
        message: respMsg,
        type: 'error'
      });
      }
    },
    details(d) {
      modal.data = d;
      modalActions.show();
    }
  }

  const modal = reactive({
    data: undefined as any,
    visible: false,
  })
  const modalActions = {
    show() {
      modal.visible = true;
    },
    close() {
      modal.visible = false;
    }
  }

  tableActions.getList();

</script>

<template>
  <div class="p-4 user-log-management">
    <div class="searchBox mb-4 px-4 pt-4">
      <el-form :model="searchForm" ref="searchFormRef" inline :label-width="90">
        <el-form-item
          prop='operator'
          label="操作人">
          <el-input v-model="searchForm.operator" />
        </el-form-item>
        <el-form-item
          prop='dataRange'
          label="时间范围">
          <el-date-picker type="datetimerange" v-model="searchForm.dataRange" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间" end-placeholder="结束时间"/>
        </el-form-item>
        <el-form-item>
          <el-button style="margin-right: 10px" :loading="loading" type="primary" @click="searchFormActions.ok">查询</el-button>
          <el-button @click="searchFormActions.reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="middle-content p-4">
      <el-table class="mb-4" v-loading="loading"  :data="table.data">
        <el-table-column type="index" width="55" fixed label="序号"></el-table-column>
        <el-table-column prop="applicationName" label="应用名称" :width="220" fixed show-overflow-tooltip></el-table-column>
        <el-table-column prop="username" label="操作人" :width="90" show-overflow-tooltip></el-table-column>
        <el-table-column prop="operation" label="操作" :width="220" show-overflow-tooltip></el-table-column>
        <el-table-column prop="message" label="操作详情" :width="250" show-overflow-tooltip></el-table-column>
        <el-table-column prop="remoteIp" label="访问ip" :width="250" show-overflow-tooltip></el-table-column>
        <el-table-column prop="requestUri" label="请求url" :width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="status" label="状态" :width="120">
          <template #default="scope">
            <span v-if='scope.row.status == 1' style="color:#2ed573">成功</span>
            <span v-else style="color: #ff4757">失败</span>
          </template>
        </el-table-column>
        <el-table-column prop="operationTime" label="操作时间" :width="220"></el-table-column>
        <el-table-column prop="operation" label="操作" :width="220" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="tableActions.details(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="flex justify-end" background layout="prev, pager, next"
      :total="pg.total"
      :current-page="pg.current"
      :page-size="pg.size"
      @current-change="pgActions.currentChange"></el-pagination>
    </div>
    <el-dialog
      v-model="modal.visible"
      title="详情"
      @close="modalActions.close"
      :width="800">
      <div style="padding: 25px 40px 40px;">
        <el-row :gutter="10" class="pb-2">
          <el-col :span="4" class='text-right'>应用名称：</el-col>
          <el-col :span="8">{{modal.data?.applicationName}}</el-col>
          <el-col :span="4" class='text-right'>操作人：</el-col>
          <el-col :span="8">{{modal.data?.username}}</el-col>
        </el-row>
        <el-row :gutter="10" class="pb-2">
          <el-col :span="4" class='text-right'>操作：</el-col>
          <el-col :span="8">{{modal.data?.operation}}</el-col>
          <el-col :span="4" class='text-right'>操作时间：</el-col>
          <el-col :span="8">{{modal.data?.operationTime}}</el-col>
        </el-row>
        <el-row :gutter="10" class="pb-2">
          <el-col :span="4" class='text-right'>访问ip：</el-col>
          <el-col :span="8">{{modal.data?.remoteIp}}</el-col>
          <el-col :span="4" class='text-right'>请求url：</el-col>
          <el-col :span="8">{{modal.data?.requestUri}}</el-col>
        </el-row>
        <el-row :gutter="10" class="pb-2">
          <el-col :span="4" class='text-right'>状态：</el-col>
          <el-col :span="8">{{modal.data?.status == 1 ? '成功' : '失败'}}</el-col>
          <el-col :span="4" class='text-right'>操作详情：</el-col>
          <el-col :span="8">{{modal.data?.message}}</el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
html[data-theme='light'] {
    .searchBox {
      background-color: #fff;
    }
    .middle-content {
      background-color: #fff;
    }
  }

  html[data-theme='dark'] {
    .searchBox {
      background-color: #000;
    }
    .middle-content {
      background-color: #000;
    }
  }
.user-log-management {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  .middle-content {
    flex: 1;
  }
}
</style>